// 文本框图表
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import styles from './index.module.scss';
import { Modal } from 'antd';
import { encryptParam } from 'src/libs/paramsEncrypt';
interface IProps {
	isCurrent: boolean;
	config?: any;
	pageId: string;
}

const Text = ( props: IProps ) => {
	const { isEdit } = useParams<{ isEdit?: string }>();
	const { config } = props;
	const {
		contentFontSize,
		contentIsBold,
		contentIsItalic,
		contentFontColor,
		contentFontFamily,
		contentIsUnderLine,
		contentAlignHor,
		contentAlignVer,
	} = config.style;
	const { linkHref, inputValue, jumpReport } = config.mutual;
	const containerStyle = {
		fontSize: `${contentFontSize}px`,
		fontWeight: contentIsBold ? 700 : 100,
		fontStyle: contentIsItalic ? 'italic' : 'normal',
		color: contentFontColor,
		fontFamily: contentFontFamily,
		textDecoration: contentIsUnderLine ? 'underline' : 'none',
		textAlign: contentAlignHor,
	};

	const { style } = config;

	const itemStyle = () => {
		return {
			alignSelf: contentAlignVer,
			width: '100%',
			'marginTop': `${ style.chartTopPadding - style.chartBottomPadding || 0 }px`,		//	设置下边距
			[`${style.chartLeftPadding < 0 ? 'marginLeft' : 'paddingLeft'}`]: `${ style.chartLeftPadding || 0 }px`,
			[`${style.chartRightPadding < 0 ? 'marginRight' : 'paddingRight'}`]: `${ style.chartRightPadding || 0}px`,
			// [`${style.chartTopPadding < 0 ? 'marginTop' : 'paddingTop'}`]: `${ style.chartTopPadding || 0 }px`
		};

	};

	// const openNewWindow = () => {
	// 	window.location.href(linkHref, _black)
	// }

	let jumpReportUrl = '';
	if ( jumpReport && jumpReport.length === 2 ) {
		jumpReportUrl = `${window.location.host}/analyseManage/editReport/${encryptParam( jumpReport[1] )}/${encryptParam( isEdit )}/${encryptParam( 'PUBLISH' )}`;
	}

	const aStyles = jumpReportUrl
		? {
			display: 'block',
			height: '100%',
			width: '100%',
			cursor: 'pointer',
		  }
		: {
			cursor: 'pointer',
		  };

	let jumpUrl = jumpReportUrl ? jumpReportUrl : linkHref;
	const [ modalVisable, setModalVisable ] = useState( false );

	const handleClick = () => {
		if ( jumpUrl ) {
			const toJumpUrl = `http://${jumpUrl}`;
			let openingMode: string = '';
			if ( jumpReportUrl ) {
				openingMode = config.mutual.jumpOpeningMode || '_blank';
			} else {
				openingMode = config.mutual.openingMode || '_blank';
			}
			if ( openingMode !== 'modal' ) {
				window.open( toJumpUrl, openingMode );
			} else {
				setModalVisable( true );
			}
		}
	};

	useEffect( () => {}, [] );

	return (
		<div className={styles.text_container} style={containerStyle}>
			<div style={itemStyle()}>
				<div style={aStyles} onClick={handleClick} dangerouslySetInnerHTML={{ __html: inputValue || '<p>内容</p>' }}></div>
			</div>
			<Modal
				width="80%"
				visible={modalVisable}
				title={<span dangerouslySetInnerHTML={{ __html: inputValue || '<p>内容</p>' }}></span>}
				onOk={() => setModalVisable( false )}
				onCancel={() => setModalVisable( false )}
			>
				<div>
					<iframe style={{ width: '100%', height: '62vh' }} frameBorder="0" title="test" src={jumpUrl}></iframe>
				</div>
			</Modal>
		</div>
	);
};

export default React.memo( Text );
